import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, Button, notification, DatePicker } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import { DropDownSelect } from '@/components/DropDownSelect/index';
import { DICT } from '../enum';
import moment from 'moment';

const { RangePicker } = DatePicker;

interface Props extends FormComponentProps {
  dispatch?: Function,
  isOkNext?: Function,
  data?: {
    id: number
  },
  dict?: Object
}

@connect(({ unit_task_rules }) => ({
  dict: unit_task_rules.dict
}))
class FormItem extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      isShow: props.isShow
    };
  }
  componentDidMount() {
    const { data, form, dispatch } = this.props;
    dispatch({
      type: 'unit_task_rules/queryDict',
      payload: {
        keyList: DICT
      }
    });
    if (data) {
      const { id, ...items } = data;
      form.setFieldsValue(items)
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      isShow: nextProps.isShow
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        if(!!values.beginToEnd) {
          values.beginTime = moment(values.beginToEnd[0]._d).format("YYYY-MM-DD");
          values.endTime = moment(values.beginToEnd[1]._d).format("YYYY-MM-DD");
        }
        delete values.beginToEnd;
        values.resType = '1';
        this.props.isOkNext(values);
      } else {
        this.props.isOkNext(false);
        notification['error']({
          message: `提交失败`,
          description: '字段验证不通过',
        });
      }
    })
  };

  render() {
    const { form, dict } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 10 },
      },
    };
    return (
      <div className={this.state.isShow ? '' : 'none'}>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item
            {...formItemLayout}
            label="规则名称"
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true, message: '规则名称',
              }],
            })(
              <Input placeholder='规则名称'/>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="任务类型"
          >
            {getFieldDecorator('taskType', {
              rules: [{
                required: true, message: '任务类型',
              }],
            })(
              DropDownSelect(dict, 'rules.taskType', '', '100%')
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='工作天数（默认7）'
          >
            {getFieldDecorator('workDay', {
              rules: [{ required: true, message: '工作天数', whitespace: true }],
            })(
              <Input placeholder='请输入工作天数' />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="规则有效时间"
          >
            {getFieldDecorator('beginToEnd', {
              rules: [{
                required: true, message: '规则有效时间',
              }],
            })(
              <RangePicker
                style={{'width': '100%'}}
                format="YYYY-MM-DD"
                placeholder={['规则开始时间', '规则结束时间']}
              />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="检查频率（天/次）"
          >
            {getFieldDecorator('cycle', {
              rules: [{
                required: true, message: '检查频率',
              }],
            })(
              <Input placeholder='检查频率'/>
            )}
          </Form.Item>
        </Form>
        <div className="foo" style={{'margin': '50px 0 50px 100px'}}>
          <Button type="primary" onClick={this.handleSubmit}>下一步</Button>
          <Link to='/data/unit_task_rules'>
            <Button style={{ marginLeft: '5%' }}>返回</Button>
          </Link>
        </div>
      </div>
    );
  }
}

const FormList01 = Form.create()(FormItem);
export default FormList01;
